<template>
	<div class="footer-nav" v-if="is_nav_route">
			<div class="nav-list">
				<router-link 
					v-for="(route, index) in routes" 
					:key="index" 
					:to="route.path"
				>
					<a-icon class="foot-icon" :type="route.icon" :theme="$route.path === route.path ? 'filled' : 'outlined'"></a-icon>
					<p>{{route.cn_name}}</p>
				</router-link>
			</div>
	</div>
</template>

<script>

import { Icon } from 'ant-design-vue';
import { mapMutations } from 'vuex';

const routes = [{
					path: '/',
					icon: 'home',
					cn_name: '首页',
				},
				{
					path: '/cart',
					icon: 'star',
					cn_name: '购物车',
				},
				{
					path: '/profile',
					icon: 'smile',
					cn_name: '我的',
				}] 

export default {
	name: 'nav',
	data() {
		return {
			routes,
		}
	},
	computed: {
		is_nav_route() {
			return routes.findIndex(item => item.path === this.$route.path) >= 0
		}
	},
	components:{
		[Icon.name]: Icon
	},
	mounted() {
		this.set_show_footer_nav(this.is_nav_route)
	},
	methods: {
		...mapMutations(['set_show_footer_nav']),
		getAuth() {
				
		}
	}
}
</script>

<style lang="less" scoped>
.footer-nav {
	position: fixed;
	left: 50%;
	right: 0;
	bottom: 0;
	transform: translateX(-50%);
	height: 56px;
	max-width: 750px;
	width: 100%;
	z-index: 100;
	background: #ffffff;
	box-shadow: 0 -1px 4px -1px rgba(0, 0, 0, 0.2);
	
	.nav-list {
		display: flex;
		text-align: center;
		a {
			flex: 1;
			position: relative;
			text-decoration: none;
			line-height: 20px;
			color: #666666;
			height: 56px;
			&.router-link-exact-active {
				font-weight: bold;
				color: #333333;
				.anticon {
					color: #2470e0;
				}
			}
			p{
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				font-size: 10px;
			}
		}
		.foot-icon {
			font-size: 26px;
			margin-top: 8px;
		}
	}
}
</style>
